<div class="d-flex flex-row align-items-center justify-content-between">
  <h1 class="h4">
    {{
      edit
        ? ('cveProfile.EDIT_CVE_PROFILE' | translate)
        : ('cveProfile.ADD_CVE_PROFILE' | translate)
    }}
  </h1>
  <button (click)="onNoClick()" aria-label="Close dialog" mat-icon-button>
    <i class="eos-icons">close</i>
  </button>
</div>
<form [formGroup]="form">
  <section class="d-flex flex-row mx-0 align-items-center">
    <button
      [matMenuTriggerFor]="menu"
      type="button"
      class="d-flex mr-4"
      mat-button>
      {{ viewText }}&nbsp;<i class="eos-icons">arrow_drop_down</i>
    </button>
    <mat-menu #menu="matMenu">
      <button (click)="changeView(0)" mat-menu-item>
        <span>{{ 'cveProfile.gridHeader.VULNERABILITY' | translate }}</span>
      </button>
      <button (click)="changeView(1)" mat-menu-item>
        <span>{{ 'cveProfile.gridHeader.REPORTED_DAYS' | translate }}</span>
      </button>
      <button (click)="changeView(2)" mat-menu-item>
        <span>{{
          'cveProfile.gridHeader.REPORTED_DAYS_WITHOUT_FIX' | translate
        }}</span>
      </button>
    </mat-menu>
    <ng-container [ngSwitch]="view">
      <div class="w-25 align-items-center">
        <ng-container *ngSwitchCase="View.NAME">
          <label class="sr-only" for="name">Name</label>
          <mat-form-field appearance="standard">
            <input formControlName="name" id="name" matInput />
            <mat-error *ngIf="form.controls.name.hasError('required')">
              {{ 'setting.webhook.NAME_EMPTY' | translate }}
            </mat-error>
          </mat-form-field>
        </ng-container>
        <ng-container *ngSwitchCase="View.WITH_FIX">
          <label class="sr-only" for="withFix">Without Fix</label>
          <mat-form-field appearance="standard">
            <input formControlName="withFix" id="withFix" matInput />
            <mat-error *ngIf="form.controls.withFix.hasError('required')">
              {{ 'policy.toolBar.ID_VAL_ERR' | translate }}
            </mat-error>
            <mat-error
              *ngIf="
                form.controls.withFix.hasError('pattern') ||
                form.controls.withFix.hasError('max')
              ">
              {{ 'admissionControl.msg.NOT_NUMBER_ERR' | translate }}
            </mat-error>
          </mat-form-field>
        </ng-container>
        <ng-container *ngSwitchCase="View.WITHOUT_FIX">
          <label class="sr-only" for="withoutFix">With Fix</label>
          <mat-form-field appearance="standard">
            <input formControlName="withoutFix" id="withoutFix" matInput />
            <mat-error *ngIf="form.controls.withoutFix.hasError('required')">
              {{ 'policy.toolBar.ID_VAL_ERR' | translate }}
            </mat-error>
            <mat-error
              *ngIf="
                form.controls.withoutFix.hasError('pattern') ||
                form.controls.withoutFix.hasError('max')
              ">
              {{ 'admissionControl.msg.NOT_NUMBER_ERR' | translate }}
            </mat-error>
          </mat-form-field>
        </ng-container>
      </div>
    </ng-container>
  </section>
  <section class="row mx-0 align-items-center">
    <mat-form-field appearance="standard" class="col-12">
      <mat-label>{{ 'cveProfile.gridHeader.COMMENT' | translate }}</mat-label>
      <input formControlName="comment" matInput placeholder="Comment..." />
    </mat-form-field>
    <div class="col-12 d-flex flex-row align-items-center">
      <div class="mr-4">
        <span class="d-block font-weight-bold">{{
          'cveProfile.gridHeader.IMAGES' | translate
        }}</span>
        <span class="d-block">{{
          'group.editGroup.CONDITION_HINT' | translate
        }}</span>
      </div>
      <label class="sr-only" for="imagesInput">Images</label>
      <mat-form-field appearance="standard" style="width: 60%">
        <mat-chip-list #imageChipList formControlName="images" id="imagesInput">
          <mat-chip
            (removed)="removeImage(image)"
            *ngFor="let image of form.controls.images.value">
            {{ image }}
            <button matChipRemove>
              <mat-icon>cancel</mat-icon>
            </button>
          </mat-chip>
          <input
            (matChipInputTokenEnd)="addImage($event)"
            [matChipInputAddOnBlur]="addOnBlur"
            [matChipInputFor]="imageChipList"
            [placeholder]="'cveProfile.IMAGES_PLACEHOLDER' | translate"
            matInput />
        </mat-chip-list>
      </mat-form-field>
    </div>
    <div class="col-12 d-flex flex-row align-items-center">
      <div class="mr-4">
        <span class="d-block font-weight-bold">{{
          'cveProfile.gridHeader.DOMAINS' | translate
        }}</span>
        <span class="d-block">{{
          'group.editGroup.CONDITION_HINT' | translate
        }}</span>
      </div>
      <mat-form-field appearance="standard" style="width: 60%">
        <mat-chip-list
          #namespaceChipList
          aria-label="Namespace selection"
          formControlName="domains"
          id="namespaceInput">
          <mat-chip
            (removed)="removeNamespace(domainChip)"
            *ngFor="let domainChip of form.controls.domains.value">
            {{ domainChip }}
            <button matChipRemove>
              <mat-icon>cancel</mat-icon>
            </button>
          </mat-chip>
          <input
            #namespaceInput
            (matChipInputTokenEnd)="addNamespace($event)"
            [formControl]="namespaceCtrl"
            [matAutocomplete]="auto"
            [matChipInputFor]="namespaceChipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            [placeholder]="'ldap.ADD_DOMAIN' | translate" />
        </mat-chip-list>
        <mat-autocomplete
          #auto="matAutocomplete"
          (optionSelected)="selected($event)">
          <mat-option
            *ngFor="let domain of filteredDomains | async"
            [value]="domain">
            {{ domain }}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </div>
  </section>
</form>
<div class="d-inline-flex flex-row float-right">
  <button
    type="submit"
    (click)="confirm()"
    [disabled]="!form.valid"
    class="mr-2"
    color="primary"
    mat-raised-button>
    {{
      edit ? ('cveProfile.UPDATE' | translate) : ('cveProfile.ADD' | translate)
    }}
  </button>
  <button type="button" (click)="onNoClick()" color="warn" mat-button>
    {{ 'cveProfile.CANCEL' | translate }}
  </button>
</div>
